<template>
<div class="album_list">
 <div class="tag_list_p">
    <div class="tag_list_c">
        <a  @click="Hilight" :class="{'tag_item':true, 'Highlight':isHighlighted}"  ref="neidi"  id="neidi">内地</a>
        <a  @click="Hilight" :class="{'tag_item':true, 'Highlight':isHighlighted}"  ref="gangtai" id="gangtai">港台</a>
        <a  @click="Hilight" :class="{'tag_item':true, 'Highlight':isHighlighted}"  ref="oumei" id="oumei">欧美</a>
        <a  @click="Hilight" :class="{'tag_item':true, 'Highlight':isHighlighted}"  ref="hanguo" id="hanguo">韩国</a>
        <a  @click="Hilight" :class="{'tag_item':true, 'Highlight':isHighlighted}"  ref="riben" id="riben">日本</a>
        <a  @click="Hilight" :class="{'tag_item':true, 'Highlight':isHighlighted}"  ref="qita" id="qita">其他</a>
    </div>
 </div>
 <div class="infinite-list" v-infinite-scroll="load"  infinite-scroll-distance="100" infinite-scroll-immediate="true" style="overflow: auto;" >
    <ItemCard  :PathFolder="PathFolder" :Nums="Shownums" :need="true" :LoadMore="LoadMore"></ItemCard>
 </div>

 <el-backtop target=".infinite-list" :visibility-height="1">
    <div
      style="{
       
        height: 50px;
        width: 50px;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
</el-backtop>

</div>
</template>
<script>
//当我滚动到底部的时候，会出发load函数
//load函数将ItemCard内部的v-for的值，使其渲染更多的图片
//构造一个图片路径数组
import ItemCard from '@/components/ItemCard.vue'
const PathFolder = require.context('@/assets/XinDiePage', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数
    export default{
        name:'XinDiePage',
        components:{
            ItemCard
        },
        data(){
            return{
                isHighlighted:false,
                Shownums:106,
                PathFolder,
                LoadMore:0,
            }
        },
        methods:{
            //定位我所点击的元素
            //把其他元素的背景颜色都取消
            Hilight(event){         
                const clickedElementID = event.currentTarget.id;
                Object.entries(this.$refs).forEach((item)=>{
                    if(item[0] != clickedElementID)//如果按钮不是我点击的按钮
                    {
                    var classList = item[1].classList;//每个item都有一个自己的cls
                    classList.value = "tag_item";
                    }
                    else{          
                        item[1].classList.value = "tag_item Highlight";
                    }
                })
            },
            load(){
                //每次滑动到底部都增加基数
                this.LoadMore += 15;
            },
         
        }
      
    }
</script>
<style scoped lang="scss">
.Highlight{
    background-color: #31c27c;
}


.infinite-list{
    padding:0;
   /* 必须设置一个固定的高度，必能使用百分数 */
   max-width: 1200px;
   height: 1000px;   
   margin: 0 auto;
    overflow: hidden;
    scrollbar-width:none;
}
.tag_item{
    
    cursor: pointer;
    /* float:left; */
    padding:0 8px;
    margin:0 24px 15px 0;
    text-decoration:none;
    color: #000;
    &:hover{
        color: #31c27c;
    }
}
.tag_list{
    &_p{
     width: 1200px;
    position:relative;
    margin:0 auto;
    }
    &_c{
    position:relative;
    height:auto;
    clear:both;
    overflow:hidden;
    line-height:26px;
    padding-left:65px;
    margin-bottom: 15px;
    }
}


 .album_list{
    height: 100%;
    margin:0 auto;
    padding:35px 0 0;
    position: relative;
    overflow: hidden;
}
</style>